<template>
  <view>
    <view class="back" @click="goBack">
      <p>&lt; 返回</p>
    </view>
    <view class="text_div">
      <view
        ><p style="font-size: 36rpx">
          <b>{{ text }}</b>
        </p></view
      >
      <view
        ><p style="font-size: 28rpx; color: #999999">{{ desc }}</p></view
      >
    </view>
    <view class="login-form">
      <view class="login-form-item">
        <p>手机号</p>
        <input type="tel" placeholder="请输入手机号" />
      </view>
      <view class="login-form-item">
        <p>密码</p>
        <input type="password" placeholder="请输入密码" password />
      </view>
      <button
        style="background-color: #0ccb82; color: #fff; margin-top: 80rpx"
        @click="login"
      >
        登录
      </button>
      <p style="float: right; margin-top: 40rpx; font-size: 28rpx" @click="forget">
        忘记密码？
      </p>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "欢迎登录",
      desc: "消点通：一站式解决员工沟通、文件管理",
    };
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
    login() {
      uni.switchTab({
              url: "/pages/main/main",
      });
    },
    forget(){
        uni.navigateTo({
        url: "/pages/login/forget",
      });
    }
  },
};
</script>

<style>
.back {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  font-size: 28rpx;
  color: #0ccb82;
}
.login-form {
  position: absolute;
  top: 400rpx;
  margin-left: 70rpx;
  width: 610rpx;
}
.login-form-item {
  padding-top: 20rpx;
}
.login-form-item p {
  font-size: 24rpx;
  color: #666666;
  padding: 10rpx;
}

.login-form-item input {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #666666;
  border-bottom: 2rpx solid #edeef2;
}

.login-form-item input:hover {
  font-size: 28rpx;
  padding: 10rpx 10rpx;
  color: #0CCB82;
  border-bottom: 2rpx solid #0CCB82 ;
}


.text_div {
  position: absolute;
  top: 132rpx;
  margin-left: 70rpx;
}
</style>